import { Component, createRef } from 'react'
import { connect } from 'react-redux'
import { addPerson } from '../../redux/actions/list'
import { v4 as uuidv4 } from 'uuid'
class List extends Component{
  nameRef = createRef()
  ageRef = createRef()
  addPerson = ()=> {
    const { nameRef, ageRef } = this
    const name = nameRef.current.value
    const age = ageRef.current.value
    const id = uuidv4()
    this.props.addPerson({
      id,
      name,
      age
    })
    nameRef.current.value = ''
    ageRef.current.value = ''
  }
  render() {
    return (
      <div>
        <div>
          <input ref={this.nameRef} placeholder="姓名" />
          <input ref={this.ageRef} placeholder="年龄" />
          <button onClick={this.addPerson}>添加</button>
        </div>
        <div>
          {
            this.props.ifShowList ?
            this.props.list.map(item => <div key={item.id}><span>姓名:{item.name}</span><span>年龄:{item.name}</span></div>) :
            <div>被隐藏</div>
          }
        </div>
      </div>
    )
  }
}
export default connect(
  state => ({
    list: state.list,
    ifShowList: state.ifShowList
  }),
  {
    addPerson
  }
)(List)